<template>
	<view>
		<u-navbar :border-bottom="false" title-color="#333" title-bold title="添加案例" title-size="36"></u-navbar>
		
		<view class="d-id u-padding-24">
			<view class="d-item flex flex_sb border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14 font_weight">
					标题<span class="xing">*</span>
				</view>
				<u-input input-align="right" v-model="title" />
			</view>
			<view class="d-item flex flex_sb border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14 font_weight">
					领域
				</view>
				<view class="flex" @click="wcshow=true">
					<view class="u-m-r-4 item-vl">
						{{type?type:'请选择'}}
					</view>
					<u-icon name="arrow-right" color="#333" size="24"></u-icon>
				</view>
			</view>
			<view class="font_weight u-p-b-22 u-p-t-22">
				案件详情
			</view>
			<view class="textarea-d">
				<!-- <u-input maxlength="0" v-model="content" type="textarea" height="280" placeholder="请输入案例内容" /> -->
				<piaoyiEditor :maxlength="30000" @changes="saveContens" :readOnly="readOnly" :photoUrl="action" :name="name2"/>
			</view>
			<view class="u-m-t-10 u-m-t-34 flex flex_wrap">
				<view class="addimg u-margin-4" v-for="(item,index) in images" :key="index"
				v-if="item.split('.').pop()=='png' || item.split('.').pop()=='jpg'" >
					<image class="addimg"  :src="item" mode="aspectFill"></image>
				</view>
				<view class="addimg u-margin-4" v-for="(item,index) in images" :key="index"
				 v-if="item.split('.').pop()=='mp4'">
				    <video class="addimg"  :src="item" controls></video>
				 </view>
				<view class="addimgbtn" @click="chooseMedia" v-if="images.length<6">
					<u-icon name="camera" color="#c8c8c8" size="80"></u-icon>
					<view class="font_12_666 u-m-t-10">
						添加图片或视频
					</view>
					<view class="u-m-t-10">
						（最多6张）
					</view>
				</view>
			</view>
		</view>
		
		
		<u-picker mode="selector" confirm-color="#20C064" :range="selector" v-model="wcshow" range-key="name"
			@confirm="showconfirm"></u-picker>
		<view class="" style="width: 100%;height: 170rpx;"></view>
		<view class="btn-bo">
			<button class="btn_login_btn" @click="$u.throttle(submit, 2000)">
				提交
			</button>
		</view>
	</view>
</template>

<script>
	import piaoyiEditor from '../../../components/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue';
	export default {
		components: {
			piaoyiEditor
		},
		data() {
			return {
				readOnly: false, //是否只读
				name2: 'file',
				
				
				wcshow:false,
				name:'',
				phone:'',
				list: [],
				type:'',
				
				// 演示地址，请勿直接使用
				action: '',
				fileList: [],
				
				formData: {
					token: uni.getStorageSync("token")
				},
				selector: [],
				
				title:'',
				tag_id:'',
				content:'',
				images:[],
			}
		},
		onLoad() {
			this.lingyuList()
			this.action = this.$config.uploadUrl
			console.log(this.action)
		},
		methods: {
			saveContens(e) {
				this.content = e.html
			},
			lingyuList(){
				this.$api({
					url: '/lawyer/getTags',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						type:1 //类型：1=擅长领域，2=服务类型
					},
				}).then(res => {
					if (res.code == 1) {
						this.selector = res.data
					}
				})
			},
			chooseMedia(){
				let that = this
				uni.chooseMedia({
				  count: 6,
				  mediaType: ['image','video'],
				  sourceType: ['album'],
				  maxDuration: 30,
				  camera: 'back',
				  success(res) {
				    console.log(res.tempFiles)
					
					const tempFiles = res.tempFiles;
					
					for(let i =0;i<tempFiles.length;i++){
						console.log(tempFiles.length)
						uni.uploadFile({
							url: that.$config.uploadUrl,
							filePath: tempFiles[i].tempFilePath,
							name: 'file',
							formData: {
								token: uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
						
								if (JSON.parse(uploadFileRes.data).code != 1) {
									uni.showToast({
										title: JSON.parse(uploadFileRes.data).msg,
										icon: 'none'
									})
									return
								}
								
								that.images.push(JSON.parse(uploadFileRes.data).data.path)
						
							}
						});
					}
					
					
					
				  }
				})
			},
			showconfirm(e) {
				this.type = this.selector[e].name
				this.tag_id = this.selector[e].id
				console.log(e)
			},
			back(){
				uni.navigateBack()
			},
			
			submit(){
				if (!this.title) {
					uni.showToast({
						title: "请输入标题",
						icon: "none"
					});
					return
				}
				this.$api({
					url: '/lawyer/saveCaseInfo',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						tag_id:this.tag_id,
						content:this.content,
						images:this.images.toString(),
						title:this.title
					},
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: "新增成功",
							icon: "none"
						});
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				})
			},
			

			
		}
	}
</script>

<style scoped lang="scss">
	.addimg{
		width: 200rpx;
		height: 200rpx;
		
	}
	.addimgbtn{
		width: 200rpx;
		height: 200rpx;
		border: 1px dashed #C8C8C8;
		text-align: center;
		padding-top: 30rpx;
		color: #C8C8C8;
		font-size: 24rpx;
	}
	.xing {
		color: #FF0000;
	}
	.popupmd{
		width: 554rpx;
		// height: 344rpx;
		background: linear-gradient( 180deg, #FFECEA 0%, #FFFFFF 100%);
		padding: 68rpx 24rpx;
		
		
		.p-bd{
			font-size: 28rpx;
			line-height: 64rpx;
			text-align: center;
			
			.p-btn2{
				width: 248rpx;
				height: 64rpx;
				background: linear-gradient( 180deg, #FA2D2D 0%, #F40000 100%);
				border-radius: 46rpx 46rpx 46rpx 46rpx;
				color: #FFFFFF;
			}
		}
		
		
	}
	.btn-bo{
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0,0,0,0.14);
		padding-top: 14rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
		
		.btn_login_btn{
			width: 686rpx;
			height: 90rpx;
			background: linear-gradient( 180deg, #FA2D2D 0%, #F40000 100%);
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			// margin-top: 116rpx;
			font-size: 36rpx;
			color: #fff;
			line-height: 90rpx;
			margin-left: 32rpx;
			text-align: center;
			font-weight: bold;
		}
	}
	.d-id {
		width: 702rpx;
		padding:0 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 24rpx auto;
		
		.d-item{
			height: 100rpx;
			.d-item-t{
				width: 160rpx;
			}
		}
		.item-vl {
			font-size: 28rpx;
			color: #9695A3;
			width: 256rpx;
			text-align: right;
		}
	}

	.textarea-d {
		width: 640rpx;
		min-height: 280rpx;
		background: #F8F8F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 24rpx;
	}

</style>